<!--首页的一个下面的一个菜单-->
<template>
    <div  class='box' >
        <div  v-for="mitem in data">
        <router-link class="item"  v-bind:to='mitem.mto'><i  v-bind:class='mitem.mclass'></i>{{mitem.name}}</router-link>
        </div>

    </div>

</template>

<script>
    export default {
        name: 'nav-box',
        mounted(){
            let that = this;
            that.data =  [
                { "name": "运势","mto": "/luck","mclass":"luck"},
                { "name": "笑一笑","mto": "/joke-img","mclass":"joke-img"},
                { "name": "今天","mto": "/today","mclass":"today"},
                { "name": "英文励志","mto": "/eg","mclass":"eg"},
                { "name": "获得ip","mto": "/ip","mclass":"ip"},
                { "name": "翻译","mto": "/cn-eg","mclass":"cn-eg"},
                { "name": "组件","mto": "/module","mclass":"other"},
                { "name": "敬请期待","mto": "/","mclass":"other"}
            ]

        },
        created(){
            //用vuex设置状态，改变class;
            this.$store.dispatch("inOther");
        },
        data () {
            return {
                apiUrl:"http://route.showapi.com/1211-1",
                showapi_sign:"1688d17e4c41492daaef9e12d36dcd0d",
                showapi_appid:"35517",
                data:'',
            }
        },
    }
</script>

<style lang='less'>
.images(@img:other){
    background-image:url("./../assets/images/@{img}.jpg");
}
    .box{
        width:100%;
        margin:10px 0;
        .item{
            width:25%;
            float:left;
            height:60px;
            text-align:center;
            color:#00a6c6;
            text-decoration: none;
            font-size:12px;
            i{
                width:35px;
                height:35px;
                border-radius:50%;
                display:block;
                margin:5px auto;
                background-size:100%;
            }
        
            .luck{
                .images(luck)
            }
            .joke-img{
                .images(joke)
            }
            .today{
                .images(today)
            }
            .eg{
                .images(eg)
            }
            .ip{
                .images(ip)
            }
            .cn-eg{
                .images(cn-eg)
            }
            .other{
                .images()
            }
        }
    }
</style>